<div id="repairOrder">
    <div id="userAddrPanel"></div>
    <script type="text/x-dot-template" id="addrInfoTemp">
        {{?it.length==0}}
        <div class="noAddress" id="addButtonDiv" onclick="openCart()">＋请添加联系人及上门地址</div>
        {{??}}
        <input type="hidden" id="userAddressId" value="{{=it[0].id}}"/>
        <div class="box-panel address">
            <div><p class="left title">联系方式</p>
                <p class="right selectAddr" onclick="openCart()">修改</p></div>
            <hr>
            <div id="selectedAddress">
                <p id="addr-user" class="left imgBackground"
                   style="background-image: url('/statics/imgs/user.png')">{{=it[0].name}}</p>
                <p id="addr-mobile" class="right imgBackground"
                   style="background-image: url('/statics/imgs/phone2.png')">{{=it[0].phone}}</p>
            </div>
            <div>
                <p id="addr-detail" class="imgBackground"
                   style="background-image: url('/statics/imgs/position2.png')">{{=it[0].address}}</p>
            </div>
        </div>
        {{?}}
    </script>
    <div class="box-panel">
        <div><p class="left title">报修故障</p></div>
        <hr>
        <div class="faultCategory">
            <div id="selectFault" class="cateUnSelected" data-categoryId="" data-categorySecondId=""
                 onclick="selectCategory(this)">选择故障
            </div>
            <div class="categoryPanel" style="display: none">
                <ul id="firstUL">
                    <c:forEach var="par" items="${categoryRepository.findByParentId(0)}">
                        <li id="root-id-${par.id}" data-cateId="${par.id}" class="selectedLi">${par.name}</li>
                    </c:forEach>
                </ul>
                <ul id="secondUL">
                    <c:forEach items="${categoryRepository.findByParentId(0)}" var="root">
                        <c:forEach items="${categoryRepository.findByParentId(root.id)}" var="child">
                            <li id="child-id-${child.id}" data-cateId="${root.id}"
                                data-cateSecId="${child.id}">${child.name}</li>
                        </c:forEach>
                    </c:forEach>
                </ul>
                <div style="clear: both"></div>
                <div class="pop-shadow" style="filter:alpha(opacity:30);opacity:0.3;"></div>
            </div>
        </div>
        <div class="area-panel">
            <textarea id="content" placeholder="备注"></textarea>
        </div>
    </div>
    <div class="box-panel">
        <p style="text-align: center;font-size: 12px"><a href="tel:18500419264">您可以联系010-66579009询问物业客服人员</a></p>
    </div>
    <div id="subOrder"> 提交报修项</div>
</div>
<div id="subOk" style="display: none;">
    <div class="box-panel">
        <p style="text-align: center;    line-height: 80px;">提交成功，请等待维修师傅联系您！</p>
        <div class="btn-5"> <p onclick="javascript:window.location.href='/repair/orderList.jspa'">查看报修记录</p></div>
        <div class="btn-5"> <p onclick="javascript:window.location.href='/'">返回首页</p></div>
    </div>

</div>

<div class="ypfood-head">
    <div class="back-div" onClick="javascript :history.back(-1);">
        <img src="/statics/imgs/head-back.png?v=${params.ver}">
    </div>
    <div>
        <span class="title-span">填写报修信息</span>
    </div>
</div>
<div id="addrPanel" class="pop-panel">
    <div class="pop-panel-shadow" style="filter:alpha(opacity:30);opacity:0.3;"></div>
    <div id="addrPanelContent" class=" pop-panel-content" style="display: none">
        <div><p>新增/编辑联系方式</p>
            <p onclick="hideCartPanel()"></p>
        </div>
        <hr>
        <div id="editDetail">
            <table class="table">
                <input id="addrId" type="hidden"/>
                <tr>
                    <td style="background-image: url('/statics/imgs/user.png')">报修人</td>
                    <td><input type="text" id="consignee" maxlength="10" value=""
                               placeholder="请输入报修人姓名">
                    </td>
                </tr>
                <tr>
                    <td style="background-image: url('/statics/imgs/phone2.png')">联系电话</td>
                    <td><input type="text" id="connectPhone" value="" placeholder="请输入联系电话"></td>
                </tr>
                <tr id="addressTr1">
                    <td>详细地址：</td>
                    <td><input style="width: 100%" type="text" id="address" placeholder="请输入详细地址"></td>
                </tr>
            </table>
        </div>
        <div class="buttons" onclick="updateAddr()">确定</div>
    </div>
</div>
<script>
    var isPopCartPanel = false;
    function openCart() {
        if (isPopCartPanel) {
            hideCartPanel();
        } else {
            popCartPanel();
        }
    }
    function popCartPanel() {
        $("#addrPanel").css("display", "block");
        $("#addrPanelContent").css("display", $("#addrPanel").css("display"));
        isPopCartPanel = true;
        $("body").css("overflow", "hidden");
    }
    function hideCartPanel() {
        isPopCartPanel = false;
        $("#addrPanelContent").slideToggle('100', function () {
            $("#addrPanel").css("display", "none");
            $("#addrPanelContent").css("display", $("#addrPanel").css("display"));
            $("body").css("overflow", "visible");
        });
    }
    function updateAddr() {
        if (checkdata()) {
            var param;
            if ($("#userAddressId").val() != "") {
                param = {addrId: $("#userAddressId").val()};
            } else {
                param = {};
            }
            param.address = $("#address").val();
            param.name = $("#consignee").val();
            param.phone = $("#connectPhone").val();
            json("/repair/saveUserAddress.json", param, function (data) {
                if (data.code == 0) {
                    initAddr();
                    hideCartPanel();
                }
            });
        }
    }
    function checkdata() {
        /*var isPhone = /^0\d{2,3}-?\d{7,8}$/;
        var isMob = /^((\+?86)|(\(\+86\)))?(1\d{10})$/;*/
        var consignee = $("#consignee").val();
        if (consignee == '') {
            $("#consignee").addClass("error");
            layer.open({content: "报修人不能为空", time: 2});
            return false;
        }
        var phone = $("#connectPhone").val();
        /*if (!isMob.test(phone) && !isPhone.test(phone)) {
            $("#connectPhone").addClass("error");
            layer.open({content: "联系电话不符合要求", time: 2});
            return false;
        }*/
        if (phone == '') {
            $("#phone").addClass("error");
            layer.open({content: "联系电话不能为空", time: 2});
            return false;
        }
        var address = $("#address").val();
        if (address == '') {
            layer.open({content: "详细地址不能为空", time: 2});
            $("#address").addClass("error");
            return false;
        }
        return true;
    }
    function initAddr() {
        json("/repair/userAddress.json", {}, function (data) {
            if (data.code == 0) {
                $("#userAddrPanel").html(doT.template($("#addrInfoTemp").html())(data.result));
                if (data.result.length > 0) {
                    $("#address").val(data.result[0].address);
                    $("#consignee").val(data.result[0].name);
                    $("#connectPhone").val(data.result[0].phone);
                }
            }
        });
    }
    initAddr();

    function selectCategory(div) {
        if ($(div).hasClass("cateUnSelected")) {
            $(div).removeClass("cateUnSelected").addClass("cateSelected");
            $(".categoryPanel").css("display", "");
            $(".categoryPanel").find("li").removeClass("selectedLi");
            var selectCateId = $(div).attr("data-categoryId");
            if (selectCateId == "") {
                selectCateId = $("#firstUL li:first-child").attr("data-cateId");
            }
            /*$("#root-id-" + selectCateId).addClass("selectedLi");*/
            $("#root-id-" + selectCateId).click();
            var selectCateSecId = $(div).attr("data-categorySecondId");
            $("#child-id-" + selectCateSecId).addClass("selectedLi");
        } else {
            $(div).addClass("cateUnSelected").removeClass("cateSelected");
            $(".categoryPanel").css("display", "none");
        }
    }

    $(function () {
        $("#firstUL li").bind("click", function () {
            var cateId = $(this).attr("data-cateId");
            $(".categoryPanel").find("li").removeClass("selectedLi");
            $(this).addClass("selectedLi");
            $("#secondUL").find("li").css("display", "none");
            $("#secondUL").find("li[data-cateId=" + cateId + "]").css("display", "");
        });
        $("#secondUL li").bind("click", function () {
            var selectCate = $("#firstUL").find("li[class='selectedLi']");
            $("#selectFault").attr("data-categoryId", $(this).attr("data-cateId")).attr("data-categorySecondId", $(this).attr("data-cateSecId")).html($(selectCate).html() + "&nbsp;&nbsp;" + $(this).html());
            $("#selectFault").addClass("cateUnSelected").removeClass("cateSelected");
            $(".categoryPanel").css("display", "none");
        });
        $("#subOrder").bind("click", function () {
            if ($("#userAddressId").val() ==undefined ||$("#userAddressId").val() == "") {
                layer.open({content: "联系人不能为空", time: 2});
                return false;
            }
            if ($("#selectFault").attr("data-categoryId") == "" || $("#selectFault").attr("data-categorySecondId") == "") {
                layer.open({content: "请选择要报修的故障", time: 2});
                return false;
            }
            var param = {};
            param.connectionUserName = $('#addr-user').html();
            param.connectionUserMobile = $('#addr-mobile').html();
            param.connectionUserAddress = $('#addr-detail').html();
            param.categoryId = $("#selectFault").attr("data-categoryId");
            param.categorySecondId = $("#selectFault").attr("data-categorySecondId");
            param.content = $("#content").val();
            json("/admin/repair/saveRepairOrder.jspx", {param: JSON.stringify(param)}, function (data) {
                if (data.code == 0) {
                    /*layer.open({
                        content: "<div style='font-size: 16px;text-align: center;padding: 10px;'>提交成功！</div><div style='font-size: 12px;text-align: center;padding: 5px;'>请保持手机畅通，等待维修师傅联系您...</div>",
                        btn: ['返回首页', '查看报修记录'],
                        shadeClose: false,
                        yes: function () {
                            window.location.href = "/";

                        }, no: function () {
                            window.location.href = "/repair/orderList.jspa";
                        }
                    });*/
                    $("#repairOrder").css("display","none");
                    $("#subOk").css("display","");
                }
            });
        });
    })
</script>